<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-12 flex v-align-c">
      <span></span>
      <i>辅助分割</i>
    </h2>
    <div class="goods-form">
      <h3 class="pancel-s-title">辅助设置</h3>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <div class="border-box" :class="{'near-box': details.propMap.blankStyle === '11'}">
          <h4>样式风格</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.blankStyle" label="10">空白</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio v-model="details.propMap.blankStyle" label="11">分割线</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box near-box" v-if="details.propMap.blankStyle === '11'">
          <h4>颜色</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.lineColor" 
                  @active-change="activecolorChange(details, 'lineColor', '#E6E7EB', $event)" 
                  @change="colorChange(details, 'lineColor', '#E6E7EB', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.lineColor" @change="iptColorChange(details, 'lineColor', '#E6E7EB', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'lineColor', '#E6E7EB')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box">
          <h4>线条</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item  v-if="details.propMap.blankStyle === '11'">
              <div class="v-align-c font-12">
                <span>高度</span>
                <el-slider v-model="details.propMap.lineHeight" class="flex-item mar-l-15" :min="1" :max="20"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :min="1" :max="20" v-model="details.propMap.lineHeight" @input="marginChange(details, 'lineHeight',  $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="v-align-c font-12">
                <span>边距</span>
                <el-slider v-model="details.propMap.verticalMargin" class="flex-item mar-l-15" :min="1" :max="details.propMap.blankStyle === '11' ? 30 : 100"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :min="details.propMap.blankStyle === '11' ? 1 : 10" :max="details.propMap.blankStyle === '11' ? 30 : 100" v-model="details.propMap.verticalMargin" @input="marginChange(details, 'verticalMargin', $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      details1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 22,
          propMap: {
            lineHeight: '',
            verticalMargin: ''
          }
        },
        predefineColors: []
      }
    },
    // 初始化页面
    created() {
      // this.resetDetails()
      this.details = this.details1
      this.$set(this.details.propMap, 'lineHeight', this.details.propMap.lineHeight ? this.details.propMap.lineHeight * 1 : 1)
      this.$set(this.details.propMap, 'verticalMargin', this.details.propMap.verticalMargin ? this.details.propMap.verticalMargin * 1 : 1)
      const that = this
      this.$bus.$on('resetDetailsAuxiliary', function(details) {
        that.details = details
        that.$set(that.details.propMap, 'lineHeight', details.propMap.lineHeight ? details.propMap.lineHeight * 1 : 1)
        that.$set(that.details.propMap, 'verticalMargin', details.propMap.verticalMargin ? details.propMap.verticalMargin * 1 : 1)
      })
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 22,
          propMap: {
            lineHeight: '',
            verticalMargin: ''
          }
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 100) {
            obj.propMap[key] = 100
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      }
    }
  }
</script>
<style lang="less" scoped>
.drag-box{
  position: relative;
  .border-box{
    margin-bottom: 15px;
  }
}
</style>
